<template>
	<div class="security">
		<div class="security-item flex">
			<div class="security-icon">
				<img src="@/assets/me/security-user.png">
			</div>
			<div class="title-tips flex-item">
				<div class="title">用户名</div>
				<div class="tips">展示给企业查看，建议您修改为真实姓名</div>
			</div>
			<div class="security-option">
				<div class="security-number">{{data.userName}}</div>
				<div class="option-box flex">
					<span class="update"  @click="openDialog(1)">修改</span>
				</div>
			</div>
		</div>
		<div class="security-item flex">
			<div class="security-icon">
				<img src="@/assets/me/security-lock.png">
			</div>
			<div class="title-tips flex-item">
				<div class="title">密码</div>
				<div class="tips">更新时间：{{parseTime(new Date(data.updateTime))}}</div>
			</div>
			<div class="security-option">
				<div class="option-box flex">
					<span class="update" @click="openDialog(2)">修改</span>
				</div>
			</div>
		</div>
		<div class="security-item flex">
			<div class="security-icon">
				<img src="@/assets/me/security-email.png">
			</div>
			<div class="title-tips flex-item">
				<div class="title">邮箱</div>
				<div class="tips">绑定邮箱，可以增加求职反馈的及时性和准确性</div>
			</div>
			<div class="security-option">
				<div class="security-number">{{data.email || '未绑定'}}</div>
				<div class="option-box flex" v-if="data.emailAuthen == null">
					<span class="auth-btn no-auth">未认证</span>
					<span class="option-line"></span>
					<!-- <span class="update">绑定</span> -->

					<router-link to="/enterprise/update-email" class="update">绑定</router-link>
				</div>
				<div class="option-box flex" v-else>
					<span class="auth-btn">已认证</span>
					<span class="option-line"></span>
					<router-link to="/enterprise/update-email" class="update">修改</router-link>
				</div>
			</div>
		</div>
		<div class="security-item flex">
			<div class="security-icon">
				<img src="@/assets/me/security-phone.png">
			</div>
			<div class="title-tips flex-item">
				<div class="title">手机</div>
				<div class="tips">绑定手机号码，可以增加求职反馈的及时性和准确性</div>
			</div>
			<div class="security-option">
				<div class="security-number">{{data.phone}}</div>
				<div class="option-box flex" v-if="data.phoneAuthen == null">
					<span class="auth-btn no-auth">未认证</span>
					<span class="option-line"></span>
					<span class="update">绑定</span>
				</div>
				<div class="option-box flex" v-else>
					<span class="auth-btn">已认证</span>
					<span class="option-line"></span>
					<!-- <span class="update">修改</span> -->
					<router-link to="/enterprise/update-phone" class="update">修改</router-link>
				</div>
			</div>
		</div>

		<el-dialog title="修改用户名" :visible.sync="dialogVisible" width="30%" :before-close="handleClose" :show-close="false">
			 <el-form :model="form" ref="form" label-width="85px" hide-required-asterisk>
				<el-form-item label="用户名：" v-if="dialogType == 1">
					<el-input v-model="form.userName" autocomplete="off"></el-input>
				</el-form-item>
				
				<div v-if="dialogType==2">
					<el-form-item label="旧密码：">
						<el-input v-model="form.oldPassword" show-password autocomplete="off" placeholder="请输入旧密码"></el-input>
					</el-form-item>

					<el-form-item label="新密码：">
						<el-input v-model="form.newPassword" show-password autocomplete="off" placeholder="请输入新密码"></el-input>
					</el-form-item>
				</div>

			</el-form>

			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="update">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
	import {getAccountById, updateUserName, updateUserPassWord } from '@/api/me/account'
	export default {
		name:'security',
		data(){
			return {
				data:{},
				dialogVisible: false,
				dialogType: 1,
				form:{
					userName:'',
					oldPassword:'',
					newPassword:'',
				}
			}
		},
		created() {
			this.init()
		},
		methods: {
			init(){
				getAccountById().then(res => {
					if(res.resp_code == 0){
						this.data = res.datas
					}
				})
			},
			handleClose(done) {
				// this.$confirm('确认关闭？')
				// .then(_ => {
				// 	done();
				// })
				// .catch(_ => {});
			},

			openDialog(type){
				this.dialogVisible = true;
				this.dialogType = type;
			},

			update(){
				if(this.dialogType == 1){
					updateUserName(this.form).then(res =>{
						if(res.resp_code == 0){
							this.msgSuccess(res.resp_msg);
							this.data.userName = this.form.userName

							this.dialogVisible = false;
						}
					}).catch(err => {
						console.log(err)
					})
				}if(this.dialogType == 2){
					updateUserPassWord(this.form).then(res =>{
						if(res.resp_code == 0){
							this.msgSuccess(res.resp_msg);

							this.dialogVisible = false;
						}else{
							this.msgError(res.resp_msg);
						}
					}).catch(err => {
						console.log(err)
					})
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.security{
		width: 100%;
		padding-top: 20px;
		.security-item{
			border:1px solid #E7E7E7;
			margin-bottom: 20px;
			padding: 20px 24px;
			.security-icon{
				width: 50px;
				height: 50px;
				img{
					display: block;
					width: 100%;
					height: 100%;
				}
			}
			.title-tips{
				padding-left: 15px;
				.title{
					font-size: 16px;
					font-weight: bold;
					color: #111111;
					margin-top: 3px;
				}
				.tips{
					font-weight: 400;
					color: #BBBBBB;
					margin-top: 10px;
				}
			}
			.security-option{
				color: #3DABC3;
				.security-number{
					font-weight: 400;
					color: #3DABC3;
					margin-top: 5px;
				}
				.option-box{
					justify-content: flex-end;
					margin-top: 10px;
					span{
						display: block;
						cursor: pointer;
					}
					span.no-auth{
						color: #CD395B;
					}
					.option-line{
						border-right:1px solid #3DABC3;
						margin-left: 15px;
						margin-right: 15px;
						cursor: auto;
					}
				}
			}
		}
	}
</style>
